<template>
    <div class="head">
        <div class="top">
            <img :src="list.avatar" alt=""> 
            <div class="right">
                <p>
                    <span class="sp1">品牌</span>
                    <span class="sp2">{{list.name}}</span>
                </p>
                 <p class="p2">{{list.description}}/38分钟送达</p>
                <p>
                    <span class="sp3">减</span>
                    <span class="sp4">{{list.supports[0].description}}</span>

                </p>
            </div>
        </div>  
    </div>
    <div class="poster">
        <p>公告</p>
        <p>{{list.bulletin}}</p>
    </div>
    <Root/>
</template>

<script>
import axios from 'axios';
import Root from './components/Shop/Root.vue'
export default {
    data () {

        return {
            list:[],
            strs:[],
        }
    },
    components:{
        Root,
    },
    created(){
        axios.get("http://localhost:3006/list").then((res) => {
        this.list=res.data.seller;
        // this.strs=[...res.data.seller.supports];
        // console.log(res);
        console.log(this.list)
        // console.log(this.strs)

      });
    },
}
</script>

<style  scoped>

  .head{
    width:800px ;
    height: 250px;
    background-color: rgba(34, 36, 37, 0.5);
    margin: 0 auto;
    display: flex;
     /* justify-content: center; */
     align-items: center;
  }
 .head .top{
     display: flex;
     /* justify-content: center; */
     align-items: center;
  }
  .top img{
    width: 128px;
    height: 128px;
    margin-left: 48px;
    margin-right: 32px;
  }
  .top .right .sp1{
    font-size: 26px;
    color: white;
    background-color: red;
    padding: 2px;
    margin-right: 5px;
  }
  .top .right .sp2{
    font-size: 30px;
    color: white;
    /* margin-top: 15px; */
  }
  .top .right .p2{
    font-size: 24px;
    color: rgb(170, 169, 169);

  }
  .top .right .sp3{
    font-size: 24px;
    color: red;
    padding: 2px;
    background-color: aliceblue;
    margin-right: 3px;
  }
  .top .right .sp4{
    font-size: 20px;
    color: rgb(170, 169, 169);
  }
  .poster{
    width:800px ;
    height: 50px;
    margin: 0 auto;
    background-color: rgba(15, 16, 18, 0.7);
    display: flex;
    align-items: center;
  }
  .poster p:nth-of-type(1){
    margin-left: 24px;
    margin-right: 5px;
    font-weight: 600;
    background-color: white;
  }
  .poster p:nth-of-type(2){
    width: 600px;
    color: aliceblue;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>